<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>添加订单信息</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css">
    <link rel="stylesheet" href="../../static/css/style.css">
    <link rel="stylesheet" href="../../static/layui/extend/steps/steps.css">
    <style>
        .layui-form-pane .layui-form-label {
            width: 125px;
        }
    </style>
</head>
<body>
<div id="main">
    <div style="padding: 10px;padding-bottom: 0;">
        <a href="/order/order">
            <i class="layui-icon layui-icon-return" style="font-size: larger;color: #0000FF;"></i>
        </a>
    </div>
    <div class="title" style="padding: 0;">
        <div id="step_demo" class="step-body">
            <div class="step-header" style="width:80%;overflow: hidden;padding-top: 40px;padding-bottom: 10px;">
                <ul>
                    <li>
                        <span class="step-name">订单信息</span>
                    </li>
                    <li>
                        <span class="step-name">车辆信息</span>
                    </li>
                    <li>
                        <span class="step-name">司机信息</span>
                    </li>
                    <li>
                        <span class="step-name">待确认</span>
                    </li>
                    <li>
                        <span class="step-name">完成</span>
                    </li>
                </ul>
                <div>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="preBtn" style="float: left;border: 0;">
                        <i class="layui-icon layui-icon-prev"
                           style="cursor: pointer;font-size: 18px;color: #20a0ff;"></i>
                        <!--<span style="color:#20a0ff;font-size: 13px;">pre</span>-->
                    </button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary" id="nextBtn"
                            style="float: right;border: 0;margin-right: 56px;">
                        <!--<span style="color:#20a0ff;font-size: 13px;">next</span>-->
                        <i class="layui-icon layui-icon-next"
                           style="cursor: pointer;font-size: 18px;color: #20a0ff;"></i>
                    </button>
                </div>
            </div>
            <form class="step-content layui-form layui-form-pane m-form">
                <div class="step-list">
                    <fieldset class="layui-elem-field layui-field-title" style="width: 99%;">
                        <legend style="font-size: 16px;">寄件人信息</legend>
                    </fieldset>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">真实姓名<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" name="sendername" placeholder="请输入" lay-verify="required"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">联系电话<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" name="senderphone" placeholder="请输入" lay-verify="required"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">寄件地址</label>
                        <div class="layui-input-inline">
                            <select name="spro" id="spro" lay-verify="required" lay-search lay-filter="spro">
                                <option value="">请选择省</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="margin-left: -11px;">
                            <select name="scity" id="scity" lay-verify="required" lay-search lay-filter="scity">
                                <option value="">请选择市</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="margin-left: -11px;">
                            <select name="sdis" id="sdis" lay-verify="required" lay-search>
                                <option value="">请选择县/区</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">取件地址</label>
                        <div class="layui-input-inline">
                            <select name="qpro" id="qpro" lay-verify="required" lay-search lay-filter="qpro">
                                <option value="">请选择省</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="margin-left: -11px;">
                            <select name="qcity" id="qcity" lay-verify="required" lay-search lay-filter="qcity">
                                <option value="">请选择市</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="margin-left: -11px;">
                            <select name="qdis" id="qdis" lay-verify="required" lay-search>
                                <option value="">请选择县/区</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">详细地址<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" name="qujianaddrdtl" placeholder="请输入" lay-verify="required"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <fieldset class="layui-elem-field layui-field-title" style="width: 99%;">
                        <legend style="font-size: 16px;">收件人信息</legend>
                    </fieldset>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">收件人姓名<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" name="rname" placeholder="请输入" lay-verify="required"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">收件人电话<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" name="rephone" placeholder="请输入" lay-verify="required"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">收件人地址</label>
                        <div class="layui-input-inline">
                            <select name="rpro" id="rpro" lay-verify="required" lay-search lay-filter="rpro">
                                <option value="">请选择省</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="margin-left: -11px;">
                            <select name="rcity" id="rcity" lay-verify="required" lay-search lay-filter="rcity">
                                <option value="">请选择市</option>
                            </select>
                        </div>
                        <div class="layui-input-inline" style="margin-left: -11px;">
                            <select name="rdis" id="rdis" lay-verify="required" lay-search>
                                <option value="">请选择县/区</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">详细地址<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" name="readdrdtl" placeholder="请输入" lay-verify="required"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <fieldset class="layui-elem-field layui-field-title" style="width: 99%;">
                        <legend style="font-size: 16px;">物品信息</legend>
                    </fieldset>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">物品名称<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" name="hwmc" placeholder="请输入" lay-verify="required"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">物品重量(kg)<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" name="hwzl" placeholder="请输入" lay-verify="number|required"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">订单类别<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="radio" name="orderclass" value="普通" title="普通" lay-verify="required"
                                       checked
                                       class="layui-input">
                                <input type="radio" name="orderclass" value="加急" title="加急" lay-verify="required"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">注意事项<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" name="attention" placeholder="请输入" lay-verify="required"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">总费用<span style="color: red;">*</span></label>
                            <div class="layui-input-inline">
                                <input type="text" name="price" placeholder="请输入" lay-verify="number|required"
                                       class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <!--<button class="layui-btn" lay-submit lay-filter="ao">提交</button>-->
                        <!--<button type="reset" class="layui-btn layui-btn-warm" style="margin-left: -4px;">重置</button>-->
                    </div>
                </div>
                <div class="step-list">
                    <fieldset class="layui-elem-field layui-field-title" style="width: 99%;">
                        <legend style="font-size: 16px;">请选择车辆</legend>
                    </fieldset>
                    <div class="layui-form-item">
                        <label class="layui-form-label">车辆类型</label>
                        <div class="layui-inline">
                            <select name="clx" id="clx" lay-verify="required" lay-filter="clx">
                                <option value="0">请选择</option>
                                <option th:each="car:${cars}" th:value="${car}" th:text="${car}"></option>
                            </select>
                        </div>
                        <div id="carContent"></div>
                    </div>
                </div>
                <div class="step-list">
                    <fieldset class="layui-elem-field layui-field-title" style="width: 99%;">
                        <legend style="font-size: 16px;">请选择驾驶员</legend>
                    </fieldset>
                    <table class="layui-table" style="padding: 10px;">
                        <thead>
                        <tr style="text-align: center;">
                            <th></th>
                            <th style="text-align: center;">姓&nbsp;&nbsp;名</th>
                            <th style="text-align: center;">性&nbsp;&nbsp;别</th>
                            <th style="text-align: center;">电&nbsp;&nbsp;话</th>
                            <th style="text-align: center;">年&nbsp;&nbsp;龄</th>
                            <th style="text-align: center;">驾驶证类型</th>
                        </tr>
                        </thead>
                        <tbody style="text-align: center;">
                            <tr th:each="driver:${drivers}">
                                <td style="width: 5%;"><input type='radio' name='driverCheck' th:value="${driver.getId()}"></td>
                                <td style="width: 19%;" th:text="${driver.getXM()}"></td>
                                <td style="width: 19%;" th:text="${driver.getXB()}"></td>
                                <td style="width: 19%;" th:text="${driver.getSJH()}"></td>
                                <td style="width: 19%;" th:text="${driver.getNL()}"></td>
                                <td style="width: 19%;" th:text="${driver.getJSZLX()}"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="step-list">
                    <fieldset class="layui-elem-field layui-field-title" style="width: 99%;">
                        <legend style="font-size: 16px;">待确认</legend>
                    </fieldset>
                    <div id="sure" style="text-align: center;">
                        <label>
                            <h2>您是否确定信息无误，确认？</h2>
                            <a style="margin: 34px 0px;margin-left: -38px;" class="layui-btn layui-btn-normal layui-btn-sm" lay-submit id="ao" lay-filter="ao">确认</a>
                            <a class="layui-btn layui-btn-normal layui-btn-sm" id="makereset">取消</a>
                        </label>
                    </div>
                </div>
                <div class="step-list">
                    <fieldset class="layui-elem-field layui-field-title" style="width: 99%;">
                        <legend style="font-size: 16px;">完成</legend>
                    </fieldset>
                    <div class="complete" id="complete"></div>
                </div>
            </form>

        </div>
        <!--<h3 style="font-weight: bold;">添加订单</h3>-->
        <!--<a href="/order/order" style="float: right;margin-top: -10px;">-->
        <!--<i class="layui-icon layui-icon-return" style="font-size: larger;color: #0000FF;"></i>-->
        <!--</a>-->
        <!--<hr class="layui-bg-green">-->
    </div>
    <form class="layui-form layui-form-pane m-form">
    </form>
</div>
</body>
<script src="../../static/js/jquery-3.4.1.js"></script>
<script src="../../static/layui/layui.js"></script>
<script src="../../static/js/order/style.js"></script>
<script src="../../static/js/order/address.js"></script>
<script src="../../static/js/order/config.js"></script>
<script>
    layui.use(['layer', 'form'], function () {
        var form = layui.form;
        form.on('select(clx)', function (data) {
            $("#carContent").empty();
            $.ajax({
                type: 'post',
                url: '/order/getCarBHAndZZ',
                data: {
                    clx: data.value
                },
                success: function (result) {
                    var cars = result.carlist;
                    $("#carContent").append("<table class='layui-table' style='text-align: center;'><thead><tr><th></th><th style='text-align: center;'>车辆编号</th><th style='text-align: center;'>车辆载重</th><th style='text-align: center;'>车牌号码</th></tr></thead><tbody></tbody></table>");
                    for (var i = 0; i < cars.length; i++) {
                        $("#carContent table tbody").append("<tr>");
                        $("#carContent table tbody").append("<td style='width: 4%;'><input type='radio' name='carCheck' value='" + cars[i].CBH + "'></td>");
                        $("#carContent table tbody").append("<td style='width: 32%;'>" + cars[i].CBH + "</td>");
                        $("#carContent table tbody").append("<td style='width: 32%;'>" + cars[i].CZZ + "</td>");
                        $("#carContent table tbody").append("<td style='width: 32%;'>" + cars[i].CHM + "</td>");
                        $("#carContent table tbody").append("</tr>");
                    }
                    form.render('radio');
                },
                error: function (error) {
                    layer.msg("error");
                }
            });
        });
    });
</script>
</html>